<template>
  <div class="events">
    <div class="account_bottom">
        <div class="bottom_top">
            <!-- <a-button type="primary" icon="plus" style="margin-right:30px" @click="showModal">
                新建
            </a-button> -->
        </div>
        <div class="tottom_table">
            <a-table
            :columns="columns"
            :data-source="repData"
            :pagination="false"
            :bordered="true"
            :scroll="{ x: 'max-content' }"
            :rowKey="(record, index) => index"
            >
                <template slot="action" slot-scope="text, record">
                    <!-- slot-scope="text, record" -->
                    <!-- <a  style="margin-right:12px" @click="() => watchInfo(record.number)">详情</a> -->
                    <img :src="item" style="width:100px;height:100px;margin-right:10px;cursor:pointer" @click="blowUP(item)" alt="" v-for="(item,index) in record.image" :key="index+item">
                </template>
            </a-table>
            <a-pagination v-model="current" size="small" :pageSize="pageSize" @change="currentpage" showQuickJumper  :total="total" show-less-items style="text-align: right;margin-top: 15px;" />
        </div>
    </div>
    <div class="bigPic" v-if="visible" @click="closePic">
      <img :src="detailImg" alt="">
    </div>
  </div>
</template>

<script>
import {getReportData} from '../../api'
export default {
  data() {
    return {
      form1:{
        equipName:'',
        toiletName:'',
      },
      form2:{
        id:'',
      },
      columns:[
            {
                title: '厕所名称',
                dataIndex: 'facility_name',
            },
            {
                title: '问题描述',
                dataIndex: 'detail',
            },
            {
                title: '事件类型',
                dataIndex: 'type',
            },
            {
                title: '发现时间',
                dataIndex: 'date',
            },
            {
                title: '提交时间',
                dataIndex: 'create_time',
            },
            {
                title: '图片详情',
                dataIndex: 'image',
                scopedSlots: { customRender: "action" },
            }
        ],
        repData:[
            {
                facility_name:'',
                detail:'',
                type:'',
                date:'',
                create_time:'',
                image:[],
            }
        ],
        current:1,
        pageSize:10,
        total:0,
        visible:false,
        detailImg:''
    };
  },
  mounted(){
    this.getEventsReport()
  },
  methods: {
    async getEventsReport(){
      let page = this.current
      let page_size = this.pageSize
      let res = await getReportData(page,page_size)
      this.total = res.count
      this.repData = JSON.parse(JSON.stringify(res.results))
      this.repData.map(item=>{
        item.image = item.image.substring(1,item.image.length-1).split(', ')
        item.image.map((item1,index1)=>{
          item.image[index1] = item.image[index1].substring(1,item.image[index1].length-1)
        })
      })
      console.log(this.repData)
    },
    currentpage(val){
        this.current = val
        this.getEventsReport()
    },
    blowUP(url){
      this.detailImg = url
      this.visible = true
    },
    closePic(){
      this.visible = false
    }
  },
};
</script>

<style lang="less">
.events {
  @keyframes myfirst
    {
        0%   {transform: scale(.2);}
        100%   {transform: scale(1);}
    }
  padding: 24px;
  .account_bottom{
      .bottom_top{
          margin: 50px 0 30px 0;
      }
  }
  .bigPic{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 55%;
    height: 65vh;
    animation: myfirst .5s;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .table {
    :global {
      .ant-table-thead > tr > th {
        background: #fff !important;
        white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
      }
      .ant-table-tbody >tr> td {
        white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
      }
    }
  }
  .ss{
    span{
      width: 100%!important;
    }
  }
}
</style>